<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
   		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<title>用户</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
	</head>
	<style type="text/css">
	 .bnh-userlist-container{background: #f5f5f5;position: absolute;height: 100%;width: 100%;top: 0;left: 0;}
	.bnh-user-headBox{min-height: 2.14rem;background: #fff;position: fixed;width: 100%;top: 0;left: 0;z-index: 2}
	.bnh-user-headBox input{height: 0.73rem;width: 6.34rem;background: #eeeeee;text-align: center;border:none;border-radius: 7px;margin-top: 0.4rem;margin-left: 0.6rem;color: #858585;}
	.changeBox{height: 0.74rem;margin-top: 0.2rem;padding-left: 0.12rem}
	.bnh-change-item{height: 0.74rem;width: 1.8rem}
	.bnh-change-item img{height: 0.13rem;width: auto;margin-bottom: -2px;margin-left: 5px}
	.active{color: #ffaf3c}
	.bnh-user-item{height: 1.8rem;background: #fff;margin-top: 0.18rem}
	.bnh-user-item img{height: 1.14rem;width: auto;margin-left: 0.26rem}
	.bnh-tips-box{height: 1.14rem;width: 3.3rem;margin-left: 0.3rem}
	.user-name{font-size: 0.28rem;font-weight: 600;}
	.user-date{font-size: 0.24rem;line-height: 0.3rem;color: #6c6c6c}
	.bnh-money-box{height: 1.14rem;width: 1.8rem;margin-left: 0.5rem;text-align: center;color: #f17421}
	.cont{font-size: 0.36rem}
	.cont-tips{font-size: 0.24rem;line-height: 0.1rem;}
	</style>
	<body>
	<div class="bnh-userlist-container">
      <div class="bnh-user-headBox">
        <input type="text" placeholder="搜索用户">
        <div class="changeBox flex flex-align-center">
           <div class="bnh-change-item flex flex-align-center flex-pack-center" v-else='isScreen' @click="onScreen">
               <p>排序</p>
               <img src="../img/sanjia.png" alt="">
           </div>
            <div class="bnh-change-item flex flex-align-center flex-pack-center" v-else='isGrade' @click="onGrade">
               <p>等级</p>
               <img src="../img/sanjia.png" alt="">
           </div>
             <div class="bnh-change-item flex flex-align-center flex-pack-center " v-else='isDate' @click="onDate">
               <p>时间</p>
               <img src="../img/sanjia.png" alt="">
           </div>
           <div class="bnh-change-item flex flex-align-center flex-pack-center" v-else ='isConsume' @click="onConsume">
               <p>消费额</p>
               <img src="../img/sanjia.png" alt="">
           </div>
        </div><!-- 筛选框结束 -->
        <!-- 条件框 -->
      </div>
      <div style="height:2.14rem"></div>
      <!-- 列表 -->
      <div class="bnh-uesr-list">
            <div class="bnh-user-item flex flex-align-center" v-else='isListShow'>
                <img src="../img/user-heder.png" alt="">
                <div class="bnh-tips-box">
                    <p class="user-name">奋斗的青春</p>
                    <p class="user-date">注册时间：2018/04/13 16:30</p>
                </div>
                <div class="bnh-money-box">
                    <p class="cont">4499.00</p>
                    <p class="cont-tips">消费金额(元)</p>
                </div>
            </div>
      </div><!-- 列表结束 -->
   </div>
    <div style="height:0.98rem"></div>
   <!--底部菜单-->
    <div class="footer">
        <div class="footBox flex">
              <div class="foot-item ">
                  <img src="../img/home.png" alt="">
                  <p>首页</p>
              </div>
              <div class="foot-item ft-active">
                  <img src="../img/me-active.png" alt="">
                  <p>用户</p>
              </div>
              <div class="shareBox">
                  <img src="../img/home-share.png" >
              </div>
              <div class="foot-item " style="margin-left:1.3rem">
                  <img src="../img/pople.png" alt="">
                  <p>服务商</p>
              </div>
              <div class="foot-item">
                  <img src="../img/money.png" alt="">
                  <p>钱包</p>
              </div>
        </div>
    </div><!--底部菜单结束-->
	</body>
	<script type="text/javascript" src="../js/rem.js"></script>
</html>
